<template>
  <div class="bg">
    <div class="box">
      <div class="formlist">
        <div class="formitem">
          <div class="formiteml">姓名：</div>
          <div class="formitemr">
            <input type="text" placeholder="请输入姓名" v-model="name" />
          </div>
        </div>
        <div class="formitem">
          <div class="formiteml">性别：</div>
          <div class="formitemr" @click="dialog()">
            <input
              type="text"
              placeholder="请选择性别"
              disabled
              v-model="sexname"
            />
          </div>
        </div>
        <div class="formitem">
          <div class="formiteml">证件类型：</div>
          <div class="formitemr" @click="certificatesDlog()">
            <input
              style="width:300px;"
              type="text"
              placeholder="请选择证件类型"
              disabled
              v-model="certificates"
            />
          </div>
        </div>
        <div class="formitem">
          <div class="formiteml">证件号码：</div>
          <div class="formitemr">
            <input type="text" placeholder="请输入证件号" v-model="idphone" />
          </div>
        </div>
        <div class="formitem">
          <div class="formiteml">民族：</div>
          <div class="formitemr" @click="NationDialog()">
            <input
              type="text"
              placeholder="请选择民族"
              disabled
              v-model="nationName"
            />
          </div>
        </div>
        <div class="formitem">
          <div class="formiteml">手机号：</div>
          <div class="formitemr">
            <input type="text" placeholder="请输入手机号" v-model="num" />
          </div>
          <div class="yanma">
            <span v-show="show1" @click="makeCode()">获取验证码</span>
            <span v-show="!show1" class="count">{{ count }} s</span>
          </div>
        </div>
        <div class="formitem">
          <div class="formiteml">验证码：</div>
          <div class="formitemr">
            <input type="number" placeholder="请输入验证码" v-model="yanma" />
          </div>
        </div>
      </div>
      <div class="add" @click="doSubmit()">提交</div>
    </div>
    <van-popup v-model="sexdialog" position="bottom" :style="{ height: '40%' }">
      <van-picker
        title="性别"
        show-toolbar
        :columns="sex"
        @confirm="onConfirmsex"
        @cancel="onCancel1"
        @change="onChange"
      />
    </van-popup>
    <van-popup v-model="certif" position="bottom" :style="{ height: '40%' }">
      <van-picker
        title="证件类型"
        show-toolbar
        :columns="columnscar"
        @confirm="onConfirmcar"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <van-popup v-model="nation" position="bottom" :style="{ height: '40%' }">
      <van-picker
        title="民族"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
  </div>
</template>
<script>
import { ifindexApi, loginPhoneApi } from "@/service/api.js";
import { Field } from "vant";
import { Cell, CellGroup } from "vant";
import { Switch } from "vant";
import { Picker } from "vant";
import { Popup } from "vant";
import { Toast, Dialog } from "vant";
export default {
  name: "index",
  data() {
    return {
      id: "", //用户id
      sexdialog: false,
      show1: true,
      nation: false,
      name: "",
      num: "",
      age: "", //年龄
      idphone: "",
      address: "",
      nationName: "", //民族
      sexname: "",
      checked: false, //默认开关
      certificates: "", //证件类型
      cardtype: "", //证件类型num
      certif: false, //证件弹窗
      columnscar: ["身份证", "出生证", "港澳居民来往内地通行证"],
      columnsed: "",
      sex: ["女", "男"],
      gender: "",
      yanma: "",
      // gender1: "", //性别num
      //性别num
      uid: "", //id
      columns: [
        "汉族",
        "壮族",
        "满族",
        "回族",
        "苗族",
        "维吾尔族",
        "土家族",
        "彝族",
        "蒙古族",
        "藏族",
        "布依族",
        "侗族",
        "瑶族",
        "朝鲜族",
        "白族",
        "哈尼族",
        "哈萨克族",
        "黎族",
        "傣族",
        "畲族",
        "傈僳族",
        "仡佬族",
        "东乡族",
        "高山族",
        "拉祜族",
        "水族",
        "佤族",
        "纳西族",
        "羌族",
        "土族",
        "仫佬族",
        "锡伯族",
        "柯尔克孜族",
        "达斡尔族",
        "景颇族",
        "毛南族",
        "撒拉族",
        "布朗族",
        "塔吉克族",
        "阿昌族",
        "普米族",
        "鄂温克族",
        "怒族",
        "京族",
        "基诺族",
        "德昂族",
        "保安族",
        "俄罗斯族",
        "裕固族",
        "乌孜别克族",
        "门巴族",
        "鄂伦春族",
        "独龙族",
        "塔塔尔族",
        "赫哲族",
        "珞巴族"
      ],
      count: 0,
      timer: null
    };
  },
  components: {},
  created() {
    localStorage.getItem("token"), (this.token = localStorage.getItem("token"));
  },
  methods: {
    // 获取验证码
    makeCode() {
      // 判断手机号是否正确
      let regPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      // 图片验证码正则
      var codeReg = /^[0-9A-Za-z]{4}$/;
      var msg = "";
      if (this.num == "") {
        msg = "请输入正确的手机号";
        Toast.fail("请先输入手机号");
      } else if (!regPhone.test(this.num)) {
        msg = "请输入正确的手机号";
        Toast.fail("手机号错误,请重试");
      }

      if (msg == "") {
        let apptoken = JSON.parse(localStorage.getItem("apptoken"));

        // 执行接口发短信
        loginPhoneApi({
          phone: this.num,
          apptoken: apptoken
        }).then(res => {
          console.log(res);
          if (res.code == 4000) {
            //成功
            Toast.success("发送成功");
            const TIME_COUNT = 60;
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show1 = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show1 = true;
                  clearInterval(this.timer);
                  this.timer = null;
                }
              }, 1000);
            }
          } else {
            //失败

            Toast.fail(res.msg);
          }
        });
      }
    },
    // 证件弹窗
    certificatesDlog() {
      this.certif = true;
    },
    // 确认
    onConfirmcar(value, index) {
      console.log(index);
      if (index == 0) {
        this.cardtype = 1;
      } else if (index == 1) {
        this.cardtype = 6;
      } else if (index == 2) {
        this.cardtype = 4;
      }
      console.log(this.cardtype);
      this.certificates = value;
      this.certif = false;
    },
    //默认
    defaul() {
      console.log(this.checked);
    },
    onConfirmsex(value, index) {
      this.sexname = value;
      this.gender = index;
      console.log(this.gender);
      this.sexdialog = false;
    },
    // 提交
    doSubmit() {
      // console.log(this.gender);
      // 判断手机号是否正确
      let regPhone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      // 邮箱正则
      var emailReg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
      // 通行证正则
      var idCard = /^[H|M]\d[0-9]{7}$/;
      // 身份证正则
      var levalard = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      // 出生证正则
      var birthdayCard = /^[A-Z]{1}\d[0-9]{8}$/;
      var num = /^[0-9]*$/;

      var msg = "";
      if (this.name == "") {
        msg = "请输入姓名";
        Toast.fail("请输入姓名");
      }
      if (this.cardtype == "") {
        msg = "请选择证件类型";
        Toast.fail("请选择证件类型");
      }

      if (this.idphone == "") {
        msg = "请输入证件号";
        Toast.fail("请输入证件号");
      }
      if (this.yanma == "") {
        msg = "请输入姓名";
        Toast.fail("请输入验证码");
      }
      if (this.cardtype == 1) {
        // if (!levalard.test(this.idphone)) {
        //   console.log(this.idphone);
        //   msg = "请输入正确的证件号";
        //   Toast.fail("请输入正确的证件号");
        // }

        var idCard = this.idphone;
        idCard = idCard.toUpperCase(); // 转大写
        let len = idCard.length;
        let city = {
          11: "北京",
          12: "天津",
          13: "河北",
          14: "山西",
          15: "内蒙古",
          21: "辽宁",
          22: "吉林",
          23: "黑龙江 ",
          31: "上海",
          32: "江苏",
          33: "浙江",
          34: "安徽",
          35: "福建",
          36: "江西",
          37: "山东",
          41: "河南",
          42: "湖北 ",
          43: "湖南",
          44: "广东",
          45: "广西",
          46: "海南",
          50: "重庆",
          51: "四川",
          52: "贵州",
          53: "云南",
          54: "西藏 ",
          61: "陕西",
          62: "甘肃",
          63: "青海",
          64: "宁夏",
          65: "新疆",
          71: "台湾",
          81: "香港",
          82: "澳门",
          91: "国外"
        };
        //1. 判断长度
        if (len !== 15 && len !== 18) {
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的证件号");
        }
        //2. 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
        if (!/(^\d{15})|(^̲\d{17}([0-9]|X))/.test(idCard)) {
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的证件号");
        }
        //3. 地址码
        if (!city[idCard.substr(0, 2)]) {
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的证件号");
        }

        let re;
        //4. 生日
        if (len === 15) {
          re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
          let arrSplit = idCard.match(re);

          //检查生日日期是否正确
          let birth = new Date(
            "19" + arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
          );
          let isBirth =
            birth.getYear() === Number(arrSplit[2]) &&
            birth.getMonth() + 1 === Number(arrSplit[3]) &&
            birth.getDate() === Number(arrSplit[4]);
          if (!isBirth) {
            msg = "请输入正确的证件号";
            Toast.fail("请输入正确的证件号");
          }
        } else if (len === 18) {
          re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
          let arrSplit = idCard.match(re);

          //检查生日日期是否正确
          let birth = new Date(
            arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]
          );
          let isBirth =
            birth.getFullYear() === Number(arrSplit[2]) &&
            birth.getMonth() + 1 === Number(arrSplit[3]) &&
            birth.getDate() === Number(arrSplit[4]) &&
            birth.getTime() < new Date().getTime();
          if (!isBirth) {
          } else {
            //检验18位身份证的校验码是否正确。
            //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
            let valnum;
            let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            let arrCh = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
            let nTemp = 0,
              i;
            for (i = 0; i < 17; i++) {
              nTemp += idCard.substr(i, 1) * arrInt[i];
            }
            valnum = arrCh[nTemp % 11];
            if (valnum !== idCard.substr(17, 1)) {
              msg = "请输入正确的证件号";
              Toast.fail("请输入正确的证件号");
            }
          }
        }
      }
      if (this.cardtype == 6) {
        if (!birthdayCard.test(this.idphone)) {
          console.log(2);
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的出生证件号");
        }
      }
      if (this.cardtype == 4) {
        if (!idCard.test(this.idphone)) {
          console.log(3);
          msg = "请输入正确的证件号";
          Toast.fail("请输入正确的港澳证件号");
        }
      }
      console.log(this.gender);
      if (this.gender == "0" || this.gender == 1) {
        console.log("okkkk");
      } else {
        msg = "请选择性别";
        Toast.fail("请选择性别");
      }

      if (!num.test(this.age)) {
        msg = "请输入数字";
        Toast.fail("年龄请输入数字");
      }
      if (this.phone == "") {
        msg = "请输入手机号";
        Toast.fail("请输入手机号");
      }
      if (!regPhone.test(this.num)) {
        msg = "请输入正确的手机号";
        Toast.fail("请输入正确的手机号");
      }
      if (msg == "") {
        let apptoken = JSON.parse(localStorage.getItem("apptoken"));

        ifindexApi({
          token: this.token,
          apptoken: apptoken,
          name: this.name, //姓名
          cardtype: this.cardtype, //证件类型
          cardno: this.idphone, //证件号
          sex: this.gender, //性别
          phone: this.num, //手机号
          code: this.yanma,
          nation: this.nationName
        }).then(res => {
          console.log(res);
          if (res.code == 4000) {
            this.$router.go(-1);
          } else if (res.code == 4002) {
            window.localStorage.removeItem("token");
            Dialog.confirm({
              title: "提示",
              message: "需前往登录页面完成登录"
            })
              .then(() => {
                this.$router.push({
                  name: "login"
                });
                // on confirm
              })
              .catch(() => {
                // on cancel
              });
          } else {
            Toast(res.msg);
          }
        });
      }

      // this.$router.push({
      //   name: "se_doctor",
      // });
      // 默认
      if (this.checked == true) {
      }
    },
    onConfirm(value, index) {
      this.nationName = value;
      this.nation = false;
    },

    onChange(picker, value, index) {
      // console.log(value);
      this.columnsed = value;
    },
    onCancel() {
      // Toast("取消");
      this.show = false;
      this.nation = false;
      this.certif = false;
    },
    onCancel1() {
      this.sexdialog = false;
    },
    // 性别弹框
    dialog() {
      this.sexdialog = true;
    },
    // 民族弹窗
    NationDialog() {
      this.nation = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  margin-top: 1rem;
  .formlist {
    width: 95%;
    margin: 0 auto;
    .formitem {
      display: flex;
      border-bottom: 1px solid #ccc;
      .formiteml {
        width: 2.1rem;
        line-height: 1.2rem;
        font-size: 0.4rem;
      }
      .formitemr {
        width: 4rem;
        line-height: 1.2rem;
        font-size: 0.35rem;
        input {
          width: 3.5rem;
          border: none;
          line-height: 1.3rem;
          background-color: #fff;
        }
      }
      .yanma {
        width: 2.5rem;
        height: 0.8rem;
        text-align: center;
        line-height: 0.8rem;
        border: 1px solid #07c6b4;
        border-radius: 10px;
        font-size: 0.35rem;
        color: #07c6b4;
        margin-top: 0.25rem;
      }
    }
  }
}
.add {
  width: 8rem;
  height: 1rem;
  background: #07c6b4;
  border-radius: 5px;
  text-align: center;
  line-height: 1rem;
  font-size: 0.45rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12px;
  margin: 0 auto;
  margin-top: 0.8rem;
}
</style>
